<template>
    <BaseComponent :variant="{ extends: 'default', padding: '0' }">
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent :variant="{ extends: 'default', padding: '2xs' }">
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent :variant="{ extends: 'default', padding: 'xs' }">
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent :variant="{ extends: 'default', padding: 'sm' }">
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent :variant="{ extends: 'default', padding: 'md' }">
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent :variant="{ extends: 'default', padding: 'lg' }">
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent :variant="{ extends: 'default', padding: 'xl' }">
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent :variant="{ extends: 'default', padding: '2xl' }">
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent :variant="{ extends: 'default', padding: '3xl' }">
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent
        :variant="{
            extends: 'default',
            paddingTop: '0',
            paddingRight: '0',
            paddingBottom: '0',
            paddingLeft: '0'
        }"
    >
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent
        :variant="{
            extends: 'default',
            paddingTop: '2xs',
            paddingRight: '2xs',
            paddingBottom: '2xs',
            paddingLeft: '2xs'
        }"
    >
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent
        :variant="{
            extends: 'default',
            paddingTop: 'xs',
            paddingRight: 'xs',
            paddingBottom: 'xs',
            paddingLeft: 'xs'
        }"
    >
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent
        :variant="{
            extends: 'default',
            paddingTop: 'sm',
            paddingRight: 'sm',
            paddingBottom: 'sm',
            paddingLeft: 'sm'
        }"
    >
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent
        :variant="{
            extends: 'default',
            paddingTop: 'md',
            paddingRight: 'md',
            paddingBottom: 'md',
            paddingLeft: 'md'
        }"
    >
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent
        :variant="{
            extends: 'default',
            paddingTop: 'lg',
            paddingRight: 'lg',
            paddingBottom: 'lg',
            paddingLeft: 'lg'
        }"
    >
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent
        :variant="{
            extends: 'default',
            paddingTop: 'xl',
            paddingRight: 'xl',
            paddingBottom: 'xl',
            paddingLeft: 'xl'
        }"
    >
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent
        :variant="{
            extends: 'default',
            paddingTop: '2xl',
            paddingRight: '2xl',
            paddingBottom: '2xl',
            paddingLeft: '2xl'
        }"
    >
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent
        :variant="{
            extends: 'default',
            paddingTop: '3xl',
            paddingRight: '3xl',
            paddingBottom: '3xl',
            paddingLeft: '3xl'
        }"
    >
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>
</template>
